

<html>



<meta charset="utf-8">


<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>海洋牧场智慧可视化系统</title>
    <!--<link href="../static/css/_style.css" rel="stylesheet" type="text/css" media="all" />-->
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename = 'css/style.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename = 'css/watersystem.css') }}">
    <script type="text/javascript">
        document.documentElement.style.fontSize = document.documentElement.clientWidth / 768 * 100 + 'px';
    </script>
    <script src="../static/js/echarts.min.js"></script>
    

</head>



<body>
    <div class="wpbox">
        <div class="bnt">
            <div class="topbnt_left fl">
                <ul>
                    <li><a href="/mainInfo">主要信息</a></li>
                    <li><a href="/waterSystem">水下系统</a></li>
                </ul>
            </div>
            <h1 class="tith1 fl">海洋牧场智慧可视化系统</h1>
            <div class=" fr topbnt_right">
                <ul>
                    <li><a href="/dataCenter">数据中心</a></li>
                    <li><a href="/smartCenter">智能中心</a></li>
                </ul>
            </div>
            <a href="/admain" class="admain"></a>
        </div>
        <div class="leftMain">
            <div class="leftMain_top">
                <div class="leftMain_topIn">
                    <ul>
                        <div style="display: flex; justify-content:space-evenly ; width:120%">
                            <li style="flex:0 0 20%">
                                <div class="liIn">
                                    <div class="liIn" style="width: 80%;height: 5%;">
                                        <div style="display: flex;">
                                            <h3 style="flex: 1;">鱼群数量</h3>
                                            <p class="shu" style="flex: 1;"><span class="shu1">{{total_count}}</span><i></i></p>
                                        </div>

                                    </div>
                                    <div class="boxnav nav02" style="height: 30%;">
                                        <div>
                                            <p class="p3" style="display: flex;">
                                                <span><i class="dot dot2" style="flex: 1;"></i>产量(g)：{{fish_weight}}</span>
                                            </p>
                                        </div>
                                    </div>
                                    <span class="border_bg_leftTop"></span>
                                    <span class="border_bg_rightTop"></span>
                                    <span class="border_bg_leftBottom"></span>
                                    <span class="border_bg_rightBottom"></span>
                                </div>
                            </li>

                            <li style="flex:0 0 20%">
                                <div class="liIn">
                                    <div style="display: flex;">
                                        <h3 style="flex: 1;">数据总量</h3>                                  
                                        <p class="shu" style="flex: 1;"><span class="shu1">{{total_count}}</span><i></i></p>
                                    </div>
                                    <div style="display: flex;">
                                        <h3 style="flex: 1;">鱼种</h3>
                                        <p class="shu" style="flex: 1;"><span class="shu1">{{fish_species}}</span><i></i></p>
                                    </div>
                                    <div style="display: flex;">
                                        <h3 style="flex: 1;">鱼苗</h3>
                                        <p class="shu" style="flex: 1;"><span class="shu1">{{no_growth_count}}</span><i>尾</i></p>
                                    </div>
                                    <div style="display: flex;">
                                        <h3 style="flex: 1;">生长</h3>
                                        <p class="shu" style="flex: 1;"><span class="shu1">{{growth_count}}</span><i>尾</i></p>
                                    </div>
                                    <span class="border_bg_leftTop"></span>
                                    <span class="border_bg_rightTop"></span>
                                    <span class="border_bg_leftBottom"></span>
                                    <span class="border_bg_rightBottom"></span>
                                </div>
                            </li>


                            <li style="flex:0 0 20%">
                                <div class="liIn">
                                    <h3>网箱信息</h3>
                                    <div class="boxfoot"></div>
                                    <h3>网箱长度/宽度/深度：100m/50m/30m</h3>
                                    
                                    <h3>网箱经度：128.034</h3>
                                    <h3>网箱纬度：52.123</h3>
                                    <span class="border_bg_leftTop"></span>
                                    <span class="border_bg_rightTop"></span>
                                    <span class="border_bg_leftBottom"></span>
                                    <span class="border_bg_rightBottom"></span>
                                </div>
                            </li>


                            <li style="flex:0 0 20%">
                                <div class="liIn">
                                    <h3>水底传感器</h3>
                                    <div class="boxfoot"></div>
                                    <h3>运行时间：24天13小时43分钟</h3>
                                    <h3>下次检修：35天后</h3>
                                    <h3>保修过期：2035年02月01日</h3>
                                    <span class="border_bg_leftTop"></span>
                                    <span class="border_bg_rightTop"></span>
                                    <span class="border_bg_leftBottom"></span>
                                    <span class="border_bg_rightBottom"></span>
                                </div>
                            </li>
                        </div>
                    </ul>
                </div>


            </div>
        </div>



        <div class="rightMain">
            <div class="rightMain_top">
                <div class="rightMain_topIn">
                    <h3>鱼高度分布曲线</h3>
                    <div class="biaoge" style="width:100%;" id="fish_height"></div>
                    <script type="text/javascript">

                        // 基于准备好的dom，初始化echarts实例
                        var myChart = echarts.init(document.getElementById('fish_height'));
                        // 指定图表的配置项和数据
                        var option = {
                                title: {
                                    // text: '一周变化',
                                },
                                tooltip: {
                                    trigger: 'axis'
                                },
                                legend: {
                                    data:{{legend2|safe}}
                                },
                                toolbox: {
                                    show: true,
                                    itemGap: 15,
                                    showTitle: true,
                                    feature: {
                                        magicType: {
                                            show:true,
                                            title:{
                                                line:'切换为折线图',
                                                bar:'切换为柱状图',
                                            },
                                            type: ['line', 'bar']},
                                        restore: {show:true, title:'重置'},
                                        saveAsImage: {show:true, title:'保存为图片图'}
                                    }
                                },
                                xAxis:  {
                                    type: 'category',
                                    boundaryGap: false,
                                    data: {{xAxis|safe}}
                                },
                                yAxis: {
                                    type: 'value',
                                    axisLabel: {
                                        formatter: '{value}'
                                    }
                                },
                                series: [
                                {% for key, value in data_height.items() %}
                                    {
                                        name:'{{key}}',
                                        type:'line',
                                        data:{{value|safe}},
                                        itemStyle : { 
                            normal : { 
                                color:'#0AB6B2', //折线上的颜色
                            } 
                        },
                                        symbol: 'none',//去掉折线图节点
                                        smooth: true,//是否平滑曲线，true曲线，false直
                                        // 区域填充样式
                        areaStyle: {
                            normal: {
                                // 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
                                color: {//分隔区域的颜色
                                    x0: 0,
                                    y0: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0,
                                        color: "#6AB0B8" // 0% 处的颜色
                                    }, {
                                        offset: 1,
                                        color: "rgba(106,176,184,0)" // 100% 处的颜色；中间还可以设置50%、20%、70%时的颜色
                                        
                                    }],
                                    globalCoord: false // 缺省为 false，以确保上面的x,y,x2,y2表示的是百分比
                                }
                            }
                        },
                                    },
                                {% endfor %}
                                ]
                            };
                    
                            // 使用刚指定的配置项和数据显示图表。
                            myChart.setOption(option);
                    
                    </script>
                    <span class="border_bg_leftTop"></span>
                    <span class="border_bg_rightTop"></span>
                    <span class="border_bg_leftBottom"></span>
                    <span class="border_bg_rightBottom"></span>

                </div>
            </div>

        </div>
        

        <div class="rightMain">
            <div class="rightMain_top">
                <div class="rightMain_topIn" style="width:120%; margin-left: -35px;"  >
                    <h3>鱼群属性分布曲线</h3>
                    <div class="biaoge" style="width:100%;margin-top: -50px;" id="fff"></div>
                    <div id="buttonContainer" style="margin-top: -10px; width: 100%;">
                        <div style="display: flex;">
                            <div class="colorButton" data-type="A" style="flex: 1;">Bream</div>
                            <div class="colorButton" data-type="B" style="flex: 1;">Roach</div>
                            <div class="colorButton" data-type="C" style="flex: 1;">Whitefish</div>
                            <div class="colorButton" data-type="D" style="flex: 1;">Parkki</div>
                            <div class="colorButton" data-type="E" style="flex: 1;">Perch</div>
                            <div class="colorButton" data-type="F" style="flex: 1;">Pike</div>
                            <div class="colorButton" data-type="G" style="flex: 1;">Smelt</div>
                        </div>
                        
                    </div>
                    <div id="buttonContainer2" style="margin-top: 10px; width: 30%; margin-left: 150px; ">
                        <div style="display: flex;">
                            <div class="colorButton2" data-attibute="weight" style="flex: 1;">鱼重量</div>
                            <div class="colorButton2" data-attibute="size" style="flex: 1;">鱼长度</div>
                        </div>
                        
                    </div>
                    

                    <script type="text/javascript">
                                        //var chartDom = document.getElementById('fish_count');
                                        //var myChart = echarts.init(chartDom);
                                        var myChart1 = echarts.init(document.getElementById('fff'));
                                        
                                // 配置图表的选项和数据
                                
                                    // 初始显示的折线图颜色
                                    var currenttype = 'A';
                                    var currentattribute = 'weight';
                                // 初始化图表
                                    function initChart(type , attribute) {
                                                // 定义一个变量存储xAxis属性的值
                                                let xAxisValue, yAxisValue;

                                                if (type == 'A' && attribute == 'weight') {
                                                    // 根据条件设置xAxisValue的值
                                                    xAxisValue = {{ data_bream['attribute1'] | safe }};
                                                    yAxisValue = {{ data_bream['count1'] | safe }};
                                                } 
                                                else if (type == 'A' && attribute == 'size') {
                                                    xAxisValue = {{ data_bream['attribute2'] | safe }};
                                                    yAxisValue = {{ data_bream['count2'] | safe }};
                                                }
                                                else if (type == 'B' && attribute == 'weight') {
                                                    xAxisValue = {{ data_roach['attribute1'] | safe }};
                                                    yAxisValue = {{ data_roach['count1'] | safe }};
                                                }
                                                else if (type == 'B' && attribute == 'size') {
                                                    xAxisValue = {{ data_roach['attribute2'] | safe }};
                                                    yAxisValue = {{ data_roach['count2'] | safe }};
                                                }
                                                else if (type == 'C' && attribute == 'weight') {
                                                    xAxisValue = {{ data_whitefish['attribute1'] | safe }};
                                                    yAxisValue = {{ data_whitefish['count1'] | safe }};
                                                }
                                                else if (type == 'C' && attribute == 'size') {
                                                    xAxisValue = {{ data_whitefish['attribute2'] | safe }};
                                                    yAxisValue = {{ data_whitefish['count2'] | safe }};
                                                }
                                                else if (type == 'D' && attribute == 'weight') {
                                                    xAxisValue = {{ data_parkki['attribute1'] | safe }};
                                                    yAxisValue = {{ data_parkki['count1'] | safe }};
                                                }
                                                else if (type == 'D' && attribute == 'size') {
                                                    xAxisValue = {{ data_parkki['attribute2'] | safe }};
                                                    yAxisValue = {{ data_parkki['count2'] | safe }};
                                                }
                                                else if (type == 'E' && attribute == 'weight') {
                                                    xAxisValue = {{ data_perch['attribute1'] | safe }};
                                                    yAxisValue = {{ data_perch['count1'] | safe }};
                                                }
                                                else if (type == 'E' && attribute == 'size') {
                                                    xAxisValue = {{ data_perch['attribute2'] | safe }};
                                                    yAxisValue = {{ data_perch['count2'] | safe }};
                                                }
                                                else if (type == 'F' && attribute == 'weight') {
                                                    xAxisValue = {{ data_pike['attribute1'] | safe }};
                                                    yAxisValue = {{ data_pike['count1'] | safe }};
                                                }
                                                else if (type == 'F' && attribute == 'size') {
                                                    xAxisValue = {{ data_pike['attribute2'] | safe }};
                                                    yAxisValue = {{ data_pike['count2'] | safe }};
                                                }
                                                else if (type == 'G' && attribute == 'weight') {
                                                    xAxisValue = {{ data_smelt['attribute1'] | safe }};
                                                    yAxisValue = {{ data_smelt['count1'] | safe }};
                                                }
                                                else if (type == 'G' && attribute == 'size') {
                                                    xAxisValue = {{ data_smelt['attribute2'] | safe }};
                                                    yAxisValue = {{ data_smelt['count2'] | safe }};
                                                }
                                                else{
                                                    xAxisValue = {{ data_bream['attribute1'] | safe }};
                                                    yAxisValue = {{ data_bream['count1'] | safe }};

                                                }
                                        var option = {
                                            xAxis: {
                                                type: 'category',
                                                data: xAxisValue,
                                            },
                                    yAxis: {
                                        type: 'value'
                                    },
                                    series: [{
                                        data: yAxisValue,
                                        type: 'line',
                                        itemStyle : {
                                        normal: {
                                            color: '#0AB6B2', //折线上的颜色
                                        }
                                    },
                                        symbol: 'none',//去掉折线图节点
                                        smooth: true,//是否平滑曲线，true曲线，false直
                                        areaStyle: {
                                        normal: {
                                            // 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
                                            color: {//分隔区域的颜色
                                                x0: 0,
                                                y0: 0,
                                                x2: 0,
                                                y2: 1,
                                                colorStops: [{
                                                    offset: 0,
                                                    color: "#6AB0B8" // 0% 处的颜色
                                                }, {
                                                    offset: 1,
                                                    color: "rgba(106,176,184,0)" // 100% 处的颜色；中间还可以设置50%、20%、70%时的颜色

                                                }],
                                                globalCoord: false // 缺省为 false，以确保上面的x,y,x2,y2表示的是百分比
                                            }
                                        }
                                    },
        }]
    };
                                    myChart1.setOption(option);
}

                                    // 初始化显示红色折线图
                                    //initChart();
                                    initChart(currenttype, currentattribute);

                                    // 为按钮添加点击事件
                                    var colorButtons = document.getElementsByClassName('colorButton');
                                    var colorButtons2 = document.getElementsByClassName('colorButton2');
                                    for (var i = 0; i < colorButtons.length; i++) {
                                        colorButtons[i].addEventListener('click', function() {
                                            var type = this.getAttribute('data-type');
                                            if (type !== currenttype ) {
                                                currenttype = type;
                                                initChart(currenttype, currentattribute);
                                            }
                                        });
                                    }
                                    
                                    for (var i = 0; i < colorButtons2.length; i++) {
                                        colorButtons2[i].addEventListener('click', function() {
                                            var attribute = this.getAttribute('data-attibute');
                                            if (attribute !== currentattribute) {
                                                currentattribute = attribute;
                                                initChart(currenttype, currentattribute);
                                            }
                                        });
                                    }
                                       

                                        // 将配置项应用到图表
                                     //  myChart.setOption(option);
                                    </script>
                                    
                                    <span class="border_bg_leftTop"></span>
                                    <span class="border_bg_rightTop"></span>
                                    <span class="border_bg_leftBottom"></span>
                                    <span class="border_bg_rightBottom"></span>
                </div>
            </div>
        </div>






        <div class="rightMain">
            <div class="rightMain_top">
                <div class="rightMain_topIn">
                    <h3>鱼群种类占比</h3>
                    <div class="biaoge" style="width:100%;" id="fish_species"></div>
                    <script type="text/javascript">

                        // 基于准备好的dom，初始化echarts实例
                        var myChart = echarts.init(document.getElementById('fish_species'));
                        // 指定图表的配置项和数据
                        var option = {
                            title: {
                            },
                            tooltip: {
                                trigger: 'item',
                                formatter: '{a} <br/>{b} : {c} ({d}%)'
                            },
                            legend: {
                                orient: 'vertical',
                                left: 'left',
                                data: {{ legend| safe}}
                        },
                        series: [
                            {
                                name: '鱼群种类占比',
                                type: 'pie',
                                radius: '55%',
                                center: ['50%', '40%'],
                                data: {{ data| safe}},
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                            }
                        ]
                    };


                        // 使用刚指定的配置项和数据显示图表。
                        myChart.setOption(option);

                    </script>
                    <span class="border_bg_leftTop"></span>
                    <span class="border_bg_rightTop"></span>
                    <span class="border_bg_leftBottom"></span>
                    <span class="border_bg_rightBottom"></span>

                </div>
            </div>

        </div>




        

    </div>
</body>



</html>